<template>
	<view class="padding-bottom-c">		
		<view class="nav fixed no-shadow" :style="[{height:CustomBar + 'px'}]">
			<view class="flex top-men text-gray " :style="[{'padding-top': StatusBar + 'px'}]">
				<view class="user-btn round" @tap="my"><text class="cuIcon-my padding-right-xs padding-left-xs"></text><text class="text-cu">我的</text></view>
			</view>
		</view>
		<view class="nav fixed bg-blue animated" :class="top_class" style="padding-right: 116px;" :style="[{height:CustomBar + 'px'}]">
			<view class="cu-bar search" :style="[{'padding-top': StatusBar + 'px'},{'min-height':CustomBar+'px'}]">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input v-model="keyword" @confirm="search" @focus="focusEven" :adjust-position="false" type="text" placeholder="歌曲 / 歌手"
					 confirm-type="search"></input>
					 <view class="text-lg" v-show="keyword" @tap="cleanEven"><text class="cuIcon-roundclosefill text-gray "></text></view>
					<!-- <button @tap="search" class="cu-btn round bg-yellow text-white cu-btn-left-no-round">搜索</button> -->
				</view>
				<view class="user-btn-round round bg-yellow" @tap="my"><text class="cuIcon-my"></text></view>
			</view>
		</view>
		<view class="contentBg">
			<view class="logoBox">
				<image class="logo" src="/static/logo.png"></image>
			</view>

			<view class="cu-bar bg-blue margin radius search">
				<view class="search-form radius">
					<text class="cuIcon-search"></text>
					<input v-model="keyword" @confirm="search" :adjust-position="false" type="text" placeholder="歌曲 / 歌手"
					 confirm-type="search"></input>
					  <view class="text-lg" v-show="keyword" @tap="cleanEven"><text class="cuIcon-roundclosefill text-gray "></text></view>
				</view>
				<view class="action" @tap="search" style="height: 45px;">
					<text>搜一下</text>
				</view>
			</view>
		</view>

		<view class="bg-white margin-top-xs">
			<scroll-view scroll-x class="nav bg-white text-center solid-bottom">
				<view class="cu-item" :class="'hot'==TabCur?'text-red cur':''" @tap="tabSelect" data-id="hot">
					<text class="cuIcon-hot margin-right-xs"></text> 热门
				</view>
				<view class="cu-item" :class="'recomm'==TabCur?'text-red cur':''" @tap="tabSelect" data-id="recomm">
					<text class="cuIcon-upstagefill margin-right-xs"></text> 推荐
				</view>
				<view class="cu-item" :class="'new'==TabCur?'text-red cur':''" @tap="tabSelect" data-id="new">
					<text class="cuIcon-newshot margin-right-xs"></text> 最新
				</view>
			</scroll-view>

			<view v-for="(group, i) in data" :key="i" class="padding-left padding-right" v-show="i==TabCur">
				<view @tap="link_url(item.id)" v-for="(item, key) in group.list" :key="key" class="padding-top padding-bottom solid-bottom">
					<view class="flex p-xs margin-bottom-sm mb-sm">
						<view class="flex-twice flex justify-start align-start">
							<view :class="item.cate_info.class" class="cu-tag radius" style="max-width: 15%;">{{item.cate_info.tag}}</view>

							<view class="text-bold margin-left-xs text-lg text-cut" style="max-width: 430rpx;">{{item.title}}</view>
							<!-- <view class="margin-left-xs text-cut text-sm" style="max-width: 115rpx;">{{item.singer_name}}</view> -->
						</view>
						<view class="flex-sub text-right text-red flex justify-end align-center">
							<text class="cuIcon-hot margin-right-xs"></text>
							<text class="text-bold">{{item.click}}</text>
						</view>
					</view>
					<view>
						<view class="cu-capsule round margin-right-xs opacity6">
							<view class='cu-tag bg-red sm'>
								歌手
							</view>
							<view class="cu-tag line-red sm">
								{{item.singer_name}}
							</view>
						</view>
						<view class="cu-capsule round margin-right-xs opacity6">
							<view class='cu-tag sm' :class="item.mode_info.class">
								演奏
							</view>
							<view class="cu-tag line-green sm">
								{{item.mode_info.title}}
							</view>
						</view>

					</view>
				</view>
			</view>
			<!-- <view class="padding" v-show="'recomm'==TabCur">
				<text>1111222</text>
			</view>
			<view class="padding" v-show="'new'==TabCur">
				<text>2222</text>
			</view> -->
		</view>
		<view v-show="loadShow" @tap="getListData(1)" class="cu-load bg-white" :class="loadClass"></view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				TabCur: 'hot',
				top_search: false,
				data: {
					hot: {
						page:1,
						last_page:0,
						list:[]
					},
					recomm: {
						page:1,
						last_page:0,
						list:[]
					},
					new:  {
						page:1,
						last_page:0,
						list:[]
					},
				},
				hotKeyword:[],
				loadClass: 'loading',
				loadShow: true,
				page: 1,
				last_page: 0,
				reqLock: false, //请求锁，防止重复请求同一页
				top: -this.CustomBar,
				top_class: 'none',
				keyword: '',
				cleanBtnShow:false
			}
		},
		onLoad() {
			this.getListData(1, this.TabCur);
		},
		onShow() {
			this.top_class = 'none'
		},
		onPageScroll(res) {
			if (res.scrollTop > 110) {
				this.top_class = 'fadeInDown'
			} else if (this.top_class == 'fadeInDown') {
				this.top_class = 'fadeOutUp'
			}
		},
		onShareAppMessage(obj) {
			
		},
		onReachBottom(e) {
			this.loadShow = true;
			// console.log('锁：',this.reqLock, this.data[this.TabCur].last_page + 1)
			if ((this.data[this.TabCur].last_page + 1) == this.data[this.TabCur].page) {
				this.loadShow = false
			} else if (!this.reqLock) {
				this.getListData(this.data[this.TabCur].page, this.TabCur)
			}
		},
		methods: {
			focusEven(){
				this.cleanBtnShow = true;
			},
			blurEven(){
				this.cleanBtnShow = false;
			},
			cleanEven(){
				this.keyword = '';
			},
			my(){
				uni.navigateTo({
					url:'../user/index'
				})
			},
			search() {
				// if (!this.keyword) {
				// 	this.Tool.alert('请输入歌曲或歌手名！')
				// 	return false;
				// }

				uni.navigateTo({
					url: '/pages/search/index?kw=' + this.keyword
				})
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				// console.log(this.TabCur)
				
				if(this.data[this.TabCur].list.length == 0){
					this.getListData(1, this.TabCur);
					this.loadClass = 'loading';
					this.loadShow = true;
				}
				
			},
			getListData(p, type, callback) {
				this.loadClass = 'loading';
				this.reqLock = true;
				uni.request({
					url: this.Tool.url(type, {
						page: p
					}),
					success: (res) => {
						if (res.statusCode == 200 && res.data.status == 200) {
							this.data[type].list = this.data[type].list.concat(res.data.data);
							this.data[type].page = res.data.current_page + 1;
							this.data[type].last_page = res.data.last_page;
							this.loadShow = false;
							if (typeof callback == 'function') callback();
						}
					},
					fail: () => {
						this.loadClass = 'erro'
					},
					complete: () => {
						this.reqLock = false;
					}
				})
			},
			link_url(id) {
				this.Tool.alert('正在跳转···')
				uni.navigateTo({
					url: '/pages/details/index?id=' + id
				})
			}
		}
	}
</script>

<style>
	.top-men{
		height: 100%;
		justify-content: flex-end;
		align-items: center;
		padding-right: 110px;
		background-color: #fff;
	}
	
	.cu-bar.fixed.no-shadow, .nav.fixed.no-shadow{
		-webkit-box-shadow:none;
		box-shadow: none;
	}
	.contentBg {
		background-color: #FFFFFF;
		padding-bottom: 10rpx;
	}

	.logoBox {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 72rpx;
		width: 230rpx;
		margin-top: 180rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 20rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.padding-c {
		padding: 0 8px;
	}

	.padding-bottom-c {
		padding-bottom: 10px;
	}
</style>
